サーバサイドFWとvue serveを併用する

何の話？

vue-cliのv3のcli-serviceにはwatchコマンドがない

watchコマンドとは、srcの更新を監視し、更新があれば随時ビルドを実行するような機能。tscやwebpackにはある

例えば、flask対象の開発をしていて、bundleをstatic下に出力しているとして、下記の問題がある

vue buildをしない限り、flask上のstaticコンテンツが更新されない

vue serveは、おそらくwebpack-dev-serverを使っており、serve中にはbundleをファイルとして出力してくれない

対処

公式のissueで議論済み

開発中はvue serveとflaskのサーバプロセスを２つとも立てておいて、webpack-dev-serverのproxyを使ってAPIアクセスのみflask側にプロキシする

npm-run-allなどを使って、npm run serveで２プロセスともワンコマンドで起動するようにしておくといい

productionの時は普通にbuildするだけ

設定例

flaskがlocalhost:5000で立っていると仮定する。

code: vue.config.js

module.exports = {

devServer: {

proxy: {

'/api': {

}

}

}

}

このようにすると、/apiへのアクセスはflask側にプロキシされる。

裏技系（おすすめはしないけど、上記のproxy以外の解決方法）

サーバ側に一時的にCORSの穴を空けて、APIを絶対パスで呼ぶようにしておく（一時しのぎ）

watchexecのような、CLIで使えるランチャーを使ってファイル更新をトリガにvue buildを実行する

watch系のツールは他にも色々あるような気はする。とりあえずwatchという名称を上書きしないし、rust製でbrewもあるのでこれを使っている

簡単な使い方は下記の通り。だいたいwatchのあるvue-cliとして使える（はず）